$fontSizeM: 18px;
$fontSizeL: 22px;
$normalColor: #12F442;
$warningColor: #F66C07;
$overtimeColor: #F62E07;
$completeColor: #0068B7;
$fontColor: #F3F6F7;

p {margin: 0;padding: 0;}
// 背景颜色
.normal-bgcolor {background-color: $normalColor;}
.warning-bgcolor {background-color: $warningColor;}
.overtime-bgcolor {background-color: $overtimeColor;}
.complete-bgcolor {background-color: $completeColor;}

//  字体颜色
.normal-color {color: $normalColor;}
.warning-color {color: $warningColor;}
.overtime-color {color: $overtimeColor;}
.complete-color {color: $completeColor;}

.box {margin-bottom: 8px;background:rgba(0,104,183,0.2);border-radius:4px;padding: 1px 8px;}

.tit {display: flex;position: relative;
  .tit-col {width:10px;height:22px;margin-right: 5px;top: 6px;position: relative;}
  .tit-tit {font-size: $fontSizeL;margin-right: 5px;}
  .tit-ot {font-size: $fontSizeM;padding-top: 5px;
    :nth-child(2),:nth-child(3),:nth-child(4) {margin-left: 15px;}
  }
  .tit-type {font-size: $fontSizeM;padding-top: 5px;position: absolute;right: 0.5%;}
}

.con {margin:5px 0px;background:rgba(2,11,46,0.5);color: $fontColor;
  .con-bg {padding: 1px 8px;
    .con-sp {padding: 2px;display: flex;table-layout: fixed;
      div {padding-right: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
      :first-child {width: 53%;}
      :nth-child(2) {width: 28%;}
      :nth-child(3) {width: 17%;}
    }
  }
}

.footer {padding: 2px 0px;
  .footer-line {width: 386px;margin: 0 auto;padding-top: 10px;
    :first-child {width: 8px;height: 8px;background-color: #fff;border-radius: 50%;margin-right: 5px;}
    :nth-child(2) {width:358px;height:1px;background-color: #00479D;position: relative;left: 15px;bottom: 4px;}
    :nth-child(3) {border-width: 6px;border-style: solid;border-color: transparent transparent transparent #fff ;position: relative;bottom: 10px;left: 98.5%;}
  }
  .footer-con {display: flex;margin: 0 auto;
    :first-child {margin-left: 17px;}
    .footer-tit {width: 68px;color: #B5B5B5;}
    .footer-time {width: 310px;text-align: center;}
  }
}

.fwgd {margin:5px 0px;max-height: 139px;background:rgba(2,11,46,0.5);color: $fontColor;
  .tab-fwgd {
    .fwgd-head {display: flex;background:#020B2E;line-height: 28px;color: #A4A4A4;
      :first-child {margin-left: 12px;}
      div {padding-right: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    }
    .fwgd-sp {padding: 2px;margin-left: 8px;display: flex;table-layout: fixed;
      div {padding-right: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
      :first-child {width: 4%;}
      :nth-child(2) {width: 15%;text-align: center;}
      :nth-child(3),:nth-child(4){width: 24%;}
      :nth-child(5) {width: 32%;
        div {display: inline-block;width:12px;height:12px;border-radius: 50%;margin-right: 5px;}
      }
    }
  }
}

.nxdd {
  margin: 5px 0px;
  max-height: 139px;
  background:rgba(2,11,46,0.5);
  color: $fontColor;
  .tab-nxdd {
    .nxdd-head {display: flex;background:#020B2E;line-height: 28px;color: #A4A4A4;
      :first-child {margin-left: 12px;}
      div {padding-right: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    }
    .nxdd-sp {padding: 2px;margin-left: 8px;display: flex;table-layout: fixed;
      div {padding-right: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
      :first-child {width: 28%;}
      :nth-child(2),:nth-child(3), :nth-child(4) {width: 25%;}
    }
  }
}

.dsbj {
  margin:5px 0px;
  max-height: 139px;
  background:rgba(2,11,46,0.5);
  color: $fontColor;
  .tab-dsbj {
    .dsbj-head {display: flex;background:#020B2E;line-height: 28px;color: #A4A4A4;
      :first-child {margin-left: 12px;}
      div {padding-right: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    }
    .dsbj-sp {padding: 2px;margin-left: 8px;display: flex;table-layout: fixed;
      div {padding-right: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
      :first-child {width: 4%;}
      :nth-child(2),:nth-child(3),:nth-child(4) {width: 22%;}
      :nth-child(5) {width: 29%;
        div {display: inline-block;width:12px;height:12px;border-radius: 50%;margin-right: 5px;}
      }
    }
  }
}

/* 1920/1080/1600 分辨率的显示器 */
@media (max-width:1900px) {
  .box {margin-bottom: 5px;padding: 1px 5px;}
  .tit {
    .tit-col {width:5px;height:16px;}
    .tit-tit {font-size: $fontSizeM;}
    .tit-ot {font-size: 14px;padding-top: 3px;
      :nth-child(2),:nth-child(3),:nth-child(4) {margin-left: 8px;}
    }
    .tit-type {font-size: 14px;padding-top: 3px;}
  }
  .con {margin:3px 0px;
    .con-bg {padding: 1px 5px;
      .con-sp {padding: 0px;}
    }
  }
  .footer {
    .footer-line {width: 365px;padding-top: 5px;
      :first-child {margin-left: 38px}
      :nth-child(2) {width:260px;left: 52px;}
      :nth-child(3) {bottom: 11px;left: 87.5%;}
    }
    .footer-con {
      .footer-time {width: 214px;}
    }
  }
  .fwgd {margin:3px 0px;
    .tab-fwgd {
      .fwgd-head {line-height: 20px;}
      .fwgd-sp {padding: 0px;
        div {padding-right: 3px;}
        :nth-child(5) {
          div {width:9px;height:9px;margin-right: 3px;}
        }
      }
    }
  }
  .nxdd {margin: 3px 0px;
    .tab-nxdd {
      .nxdd-head {line-height: 20px;}
      .nxdd-sp {padding: 0px;
        div {padding-right: 3px;}
      }
    }
  }
  .dsbj {margin:3px 0px;
    .tab-dsbj {
      .dsbj-head {line-height: 20px;}
      .dsbj-sp {padding: 0px;
        div {padding-right: 3px;
        :nth-child(5) { div {width:9px;height:9px;} }
        }
      }
    }
  }
}

/*  1440 分辨率的显示器 */
@media screen and (min-width:1400px) and (max-width:1500px) {
  .footer {
    .footer-line {width: 316px;
      :nth-child(2) {width:210px;left: 53px;}
      :nth-child(3) {left: 85.5%;}
    }
    .footer-con {
      .footer-time {width: 162px;}
    }
  }
}
